<template>
	<!-- 浮动导航 -->
	<view class="float-nav-container" :class="{active:isActive}" :style="'bottom:' + offsetBottom">
		<view class="float-nav-main" @click="spreadNav"></view>
		<view class="float-nav-item home" @click="goHome"></view>
		<view class="float-nav-item center" @click="goCenter"></view>
		<view class="float-nav-item colunm" v-show="isShow" @click="goColunm"></view>
	</view>
</template>

<script>
	/**
	 * 浮动导航
	 */
	export default {
		name: 'stFixedNav',
		props:{
			offsetBottom: {
				type: String,
				default: '250rpx'
			},
			isShow: {
				type: Boolean,
				default: true
			}
		},
		data() {
			return {
				isActive: false,//是否展开浮动导航
				linkUrl:'',//路由前半部分（当前页面路由 — 当前页面名称）
			};
		},
		mounted(){
			// 获取当前页面的路由
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.linkUrl = curRoute.substring(0,curRoute.lastIndexOf("/"));
		},
		methods: {
			
			//展开浮动导航
			spreadNav(){
				if(this.isActive){
					this.isActive = false
				}else{
					this.isActive = true
				}
			},
			
			//去首页
			goHome(){
				uni.reLaunch({
					url: `/pages/index/home`
				})
			},
			
			//去个人中心
			goCenter(){
				uni.reLaunch({
					url: `/pages/ucenter/index`
				})
			},
			
			//去栏目首页
			goColunm(){
				uni.navigateTo({
					url: '/'+this.linkUrl+'/index'
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.float-nav-container{
		position: fixed;
		right: 24rpx;
		z-index: 98;
		width: 118rpx;
		height: 118rpx;
		.float-nav-main{
			position: absolute;
			top: 0;
			left: 0;
			z-index: 3;
			width: 118rpx;
			height: 118rpx;
			background: url("https://static.member.stourweb.cn/uniapp/static/images/float-nav-icon-menu.png") no-repeat;
			background-size: contain;
			transition: all .3s;
		}
		.float-nav-item{
			position: absolute;
			right: 0;
			top: 0;
			width: 80rpx;
			height: 80rpx;
			z-index: 1;
			transition: all .3s;
			transform: scale(0);
			&.home{
				background: url("https://static.member.stourweb.cn/uniapp/static/images/float-nav-icon-home.png") no-repeat;
				background-size: contain;
			}
			&.center{
				background: url("https://static.member.stourweb.cn/uniapp/static/images/float-nav-icon-center.png") no-repeat;
				background-size: contain;
			}
			&.colunm{
				background: url("https://static.member.stourweb.cn/uniapp/static/images/float-nav-icon-column.png") no-repeat;
				background-size: contain;
			}
		}
		&.active{
			.float-nav-main{
				transform: rotate(45deg);
			}
			.float-nav-item{
				&.home{
					top: 20rpx;
					right: 158rpx;
					transform: scale(1);
				}
				&.center{
					top: 124rpx;
					right: 98rpx;
					transform: scale(1);
				}
				&.colunm{
					top: -86rpx;
					right: 98rpx;
					transform: scale(1);
				}
			}
		}
	}
	
</style>
